<template>
  <div class="attendance-report">
    <div class="header">
      <router-link to="/main/renshi/kaoqing/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>考勤报表</h2>
    </div>

    <div class="content">
      <div class="filter-section">
        <el-form :inline="true" :model="filterForm">
          <el-form-item label="部门">
            <el-select v-model="filterForm.department" placeholder="请选择部门">
              <el-option label="全部" value=""></el-option>
              <el-option label="技术部" value="技术部"></el-option>
              <el-option label="人事部" value="人事部"></el-option>
              <el-option label="销售部" value="销售部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报表类型">
            <el-select v-model="filterForm.reportType" placeholder="请选择报表类型">
              <el-option label="月度考勤汇总" value="monthly"></el-option>
              <el-option label="季度考勤统计" value="quarterly"></el-option>
              <el-option label="年度考勤分析" value="yearly"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="generateReport">生成报表</el-button>
            <el-button @click="exportReport" :disabled="!reportData.length">导出报表</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="report-content" ref="reportContent">
        <div class="report-header" v-if="reportData.length">
          <h3>{{ getReportTitle() }}</h3>
          <p class="report-info">生成时间：{{ new Date().toLocaleString() }}</p>
        </div>

        <div class="report-summary" v-if="reportData.length">
          <el-descriptions title="报表概览" :column="4" border>
            <el-descriptions-item label="部门">{{ filterForm.department || '全部' }}</el-descriptions-item>
            <el-descriptions-item label="统计人数">{{ reportSummary.totalPeople }}人</el-descriptions-item>
            <el-descriptions-item label="工作日">{{ reportSummary.workDays }}天</el-descriptions-item>
            <el-descriptions-item label="平均出勤率">{{ reportSummary.averageAttendance }}%</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="report-table" v-if="reportData.length">
          <el-table :data="reportData" style="width: 100%" border>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="workDays" label="出勤天数" width="100"></el-table-column>
            <el-table-column prop="leaveDays" label="请假天数" width="100"></el-table-column>
            <el-table-column prop="overtimeHours" label="加班时长" width="100">
              <template slot-scope="scope">
                {{ scope.row.overtimeHours }}小时
              </template>
            </el-table-column>
            <el-table-column prop="lateCount" label="迟到次数" width="100"></el-table-column>
            <el-table-column prop="earlyLeaveCount" label="早退次数" width="100"></el-table-column>
            <el-table-column prop="absentCount" label="旷工次数" width="100"></el-table-column>
            <el-table-column prop="attendanceRate" label="出勤率" width="100">
              <template slot-scope="scope">
                {{ scope.row.attendanceRate }}%
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="report-chart" v-if="reportData.length">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="chart-card">
                <h4>出勤率分布</h4>
                <div class="chart-container">
                  <!-- 这里可以使用 ECharts 等图表库展示数据 -->
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="chart-card">
                <h4>异常考勤分析</h4>
                <div class="chart-container">
                  <!-- 这里可以使用 ECharts 等图表库展示数据 -->
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterForm: {
        department: '',
        reportType: 'monthly',
        dateRange: []
      },
      reportData: [],
      reportSummary: {
        totalPeople: 0,
        workDays: 0,
        averageAttendance: 0
      }
    }
  },
  methods: {
    getReportTitle() {
      const typeMap = {
        monthly: '月度考勤汇总报表',
        quarterly: '季度考勤统计报表',
        yearly: '年度考勤分析报表'
      }
      return typeMap[this.filterForm.reportType] || '考勤报表'
    },
    generateReport() {
      if (!this.filterForm.dateRange || !this.filterForm.dateRange.length) {
        this.$message.warning('请选择时间范围')
        return
      }

      // TODO: 从后端获取报表数据
      this.reportData = [
        {
          name: '张三',
          department: '技术部',
          workDays: 22,
          leaveDays: 2,
          overtimeHours: 16,
          lateCount: 1,
          earlyLeaveCount: 0,
          absentCount: 0,
          attendanceRate: 91.67
        }
      ]

      this.reportSummary = {
        totalPeople: this.reportData.length,
        workDays: 22,
        averageAttendance: 91.67
      }
    },
    async exportReport() {
      try {
        // 使用 html2pdf 导出报表
        const element = this.$refs.reportContent
        const opt = {
          margin: 1,
          filename: `考勤报表_${new Date().toLocaleDateString()}.pdf`,
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { scale: 2 },
          jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
        }
        
        await this.$html2pdf().from(element).set(opt).save()
        this.$message.success('报表导出成功')
      } catch (error) {
        this.$message.error('报表导出失败：' + error.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.attendance-report {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .filter-section {
    margin-bottom: 20px;
  }

  .report-content {
    .report-header {
      text-align: center;
      margin-bottom: 20px;

      h3 {
        margin: 0 0 10px;
        font-size: 20px;
        color: #303133;
      }

      .report-info {
        margin: 0;
        color: #909399;
        font-size: 14px;
      }
    }

    .report-summary {
      margin-bottom: 20px;
    }

    .report-table {
      margin-bottom: 30px;
    }

    .report-chart {
      .chart-card {
        background: #f5f7fa;
        padding: 20px;
        border-radius: 4px;

        h4 {
          margin: 0 0 15px;
          color: #303133;
        }

        .chart-container {
          height: 300px;
        }
      }
    }
  }
}
</style> 